<template>
  <xy-page title="首页">
    <ul class="index-modules">
      <li class="index-module" v-for="(menu,index) in list" :key="index" @click="$toPage(menu.url)">
        <div>
          {{menu.name}}
        </div>
      </li>
    </ul>
  </xy-page>
</template>

<script>
import menuModel from "@M/menu"

export default {
  
  data(){
    return {
      list:[]
    }
  },
  methods:{
    _getMenu(out,data){
      data = data || []
      data.forEach(item => {
        if((!item.children || item.children.length == 0) && item.url){
          out.push(item);
        }else{
          this._getMenu(out,item.children);
        }
      });
    },
    init(){
      menuModel.listMenu((menu)=>{
        this.list = [];
        this._getMenu(this.list,menu);
        
        // 跳转到第一个菜单
        let temp = menu[0] || {}
        this.$toPage(temp.url)
      });
    }
  },
  mounted() {
    this.init();
  },
  activated() {
    this.init();
  },
}
</script>

<style lang="scss">
 @import '../../assets/scss/variable.scss';
 @import '../../assets/scss/mixin.scss';

 .index-modules{
    font-size:0;
  }
  .index-module{
    display: inline-block;
    width: 33.333%;
    font-size:26px;
    padding:10px;
    text-align: center;
    cursor: pointer;
    >div{
      border:1px solid $xy-border-color-light;
      border-top:4px solid #409EFF;
      height: 140px;
      line-height: 140px;
    }
    >div:hover{
      background: #ddd;
      transition: background .2s ease-in-out;
    }
  }
</style>

